// 创建 3d 柱状图
import * as am4charts from "@amcharts/amcharts4/charts"
import * as am4core from "@amcharts/amcharts4/core"

// import createXYChart3D from "../../../utils/createXYChart3D"

// createXYChart3D(chartRef, myChart, data)

// domRef, 存储实例的ref, 数据对象
const createXYChart3D = (ref, myChart, data = {}) => {
  if (myChart.current) return

  // 创建实例
  const chart = (myChart.current = am4core.create(
    ref.current,
    am4charts.XYChart3D
  ))
  chart.hiddenState.properties.opacity = 0 // this creates initial fade-in
  chart.width = am4core.percent(100)
  chart.angle = 60
  chart.depth = 10
  chart.fontSize = 12
  chart.tooltip.label.fontSize = 12
  chart.logo.disabled = true
  chart.cursor = new am4charts.XYCursor()
  chart.innerRadius = am4core.percent(40)

  // 数据来源
  chart.data = data.labels.map((label) => {
    return {
      name: label
    }
  })
  data.series.forEach((item, idx) => {
    item.data.forEach((value, index) => {
      chart.data[index]["value" + idx] = value
      chart.data[index]["name" + idx] = item.name
    })
  })

  // x
  let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis())
  categoryAxis.dataFields.category = "name"
  // y
  chart.yAxes.push(new am4charts.ValueAxis())
  // series

  data.series.forEach((item, index) => {
    const series = chart.series.push(new am4charts.ColumnSeries3D())
    series.dataFields.valueY = `value${index}`
    series.dataFields.categoryX = `name`
    series.name = item.name
    series.columns.template.tooltipText = `{name${index}}: {valueY}`
    series.columns.template.fill = am4core.color(item.color) // fill
  })
}

export default createXYChart3D
